<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
      <el-menu-item v-for="route in $router.options.routes" :index="route.path">{{ route.name }}</el-menu-item>
    </el-menu>
    <div id="body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'app',
  data () {
    return {
      activeIndex: '1'
    }
  },
  computed:{
    ...mapGetters(['getTaskTemplates', 'getTasks', 'isFirstRun']),
  },
  methods: {
    ...mapActions(['firstRun', 'createTodayTask', 'flushTimer']),
    ...mapMutations(['loadAllTask', 'loadConfig'])
  },
  mounted () {
    this.activeIndex = this.$router.options.routes[0].path
    this.$router.push(this.activeIndex)

    this.loadAllTask()
    if (this.isFirstRun) {
      this.firstRun()
    }
    this.createTodayTask()
    this.flushTimer()
  }
}
</script>

<style>
  a {
    text-decoration-line: none;
    color: #606266;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #606266;
    margin: 20px auto;
    width: 400px;
  }
  #body{
    padding: 10px;
  }
  .box-card {
    margin-bottom: 5px;
  }
  .box-card-title {
    text-align: left;
  }
  .box-card-finish {
    color: #c0c4cc;
  }
  .pointer {
    cursor: pointer;
  }
  
  .top-label {
    text-align: left;
    margin-bottom: 10px;
  }
  .top-label h5 {
    width: 40px;
    margin: 0;
    float: left;
  }
  .top-label span {
    float: left;
  }
</style>